ಸಾಲಿಡ್ ರೂಟರ್: SolidJS ನಲ್ಲಿ ಕ್ಲೈಂಟ್-ಸೈಡ್ ನ್ಯಾವಿಗೇಷನ್‌ನಲ್ಲಿ ಪರಿಣತಿ

SolidJS, ತನ್ನ ಅಸಾಧಾರಣ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಸರಳತೆಗೆ ಹೆಸರುವಾಸಿಯಾಗಿದೆ, ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಒಂದು ಅದ್ಭುತವಾದ ಅಡಿಪಾಯವನ್ನು ಒದಗಿಸುತ್ತದೆ. ನಿಜವಾಗಿಯೂ ಆಕರ್ಷಕ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ಅನುಭವಗಳನ್ನು ರಚಿಸಲು, ಒಂದು ದೃಢವಾದ ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೂಟರ್ ಅತ್ಯಗತ್ಯ. ಇಲ್ಲಿಗೆ ಸಾಲಿಡ್ ರೂಟರ್ ಬರುತ್ತದೆ, ಇದು SolidJS ನ ಅಧಿಕೃತ ಮತ್ತು ಶಿಫಾರಸು ಮಾಡಲಾದ ರೂಟರ್ ಆಗಿದ್ದು, ಫ್ರೇಮ್‌ವರ್ಕ್‌ನ ರಿಯಾಕ್ಟಿವ್ ತತ್ವಗಳೊಂದಿಗೆ ಸುಲಭವಾಗಿ ಸಂಯೋಜನೆಗೊಳ್ಳುವಂತೆ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ.

ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು ಸಾಲಿಡ್ ರೂಟರ್ ಪ್ರಪಂಚದೊಳಗೆ ಆಳವಾಗಿ ಇಳಿಯುತ್ತದೆ, ಇದರಲ್ಲಿ ಮೂಲ ಸೆಟಪ್‌ನಿಂದ ಹಿಡಿದು ಸಂಕೀರ್ಣ ಮತ್ತು ಡೈನಾಮಿಕ್ ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು (SPAs) ನಿರ್ಮಿಸುವ ಸುಧಾರಿತ ತಂತ್ರಗಳವರೆಗೆ ಎಲ್ಲವನ್ನೂ ಒಳಗೊಂಡಿದೆ. ನೀವು ಅನುಭವಿ SolidJS ಡೆವಲಪರ್ ಆಗಿರಲಿ ಅಥವಾ ಇದೀಗ ಪ್ರಾರಂಭಿಸುತ್ತಿರಲಿ, ಈ ಲೇಖನವು ಕ್ಲೈಂಟ್-ಸೈಡ್ ನ್ಯಾವಿಗೇಷನ್‌ನಲ್ಲಿ ಪರಿಣತಿ ಪಡೆಯಲು ನಿಮಗೆ ಬೇಕಾದ ಜ್ಞಾನ ಮತ್ತು ಕೌಶಲ್ಯಗಳನ್ನು ನೀಡುತ್ತದೆ.

ಸಾಲಿಡ್ ರೂಟರ್ ಎಂದರೇನು?

ಸಾಲಿಡ್ ರೂಟರ್ ಒಂದು ಹಗುರವಾದ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೂಟರ್ ಆಗಿದ್ದು, ಇದನ್ನು ವಿಶೇಷವಾಗಿ SolidJS ಗಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಇದು ಬ್ರೌಸರ್‌ನ URL ನಲ್ಲಿನ ಬದಲಾವಣೆಗಳಿಗೆ ಅನುಗುಣವಾಗಿ UI ಅನ್ನು ಸಮರ್ಥವಾಗಿ ನವೀಕರಿಸಲು SolidJS ನ ರಿಯಾಕ್ಟಿವಿಟಿಯನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತದೆ. ವರ್ಚುವಲ್ DOM ಡಿಫಿಂಗ್ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುವ ಸಾಂಪ್ರದಾಯಿಕ ರೂಟರ್‌ಗಳಿಗಿಂತ ಭಿನ್ನವಾಗಿ, ಸಾಲಿಡ್ ರೂಟರ್ ನೇರವಾಗಿ DOM ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ, ಇದರಿಂದಾಗಿ ವೇಗವಾದ ಮತ್ತು ಹೆಚ್ಚು ನಿರೀಕ್ಷಿತ ಕಾರ್ಯಕ್ಷಮತೆ ಲಭಿಸುತ್ತದೆ.

ಸಾಲಿಡ್ ರೂಟರ್‌ನ ಪ್ರಮುಖ ವೈಶಿಷ್ಟ್ಯಗಳು ಈ ಕೆಳಗಿನಂತಿವೆ:

• ಡಿಕ್ಲರೇಟಿವ್ ರೂಟಿಂಗ್: ಸರಳ ಮತ್ತು ಸಹಜವಾದ JSX-ಆಧಾರಿತ API ಬಳಸಿ ನಿಮ್ಮ ರೂಟ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ.
• ಡೈನಾಮಿಕ್ ರೂಟಿಂಗ್: ಪ್ಯಾರಾಮೀಟರ್‌ಗಳೊಂದಿಗೆ ರೂಟ್‌ಗಳನ್ನು ಸುಲಭವಾಗಿ ನಿರ್ವಹಿಸಿ, ಇದರಿಂದ ಡೈನಾಮಿಕ್ ಮತ್ತು ಡೇಟಾ-ಚಾಲಿತ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು.
• ನೆಸ್ಟೆಡ್ ರೂಟ್‌ಗಳು (ಒಳಮಾರ್ಗಗಳು): ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನೆಸ್ಟೆಡ್ ರೂಟ್‌ಗಳೊಂದಿಗೆ ತಾರ್ಕಿಕ ವಿಭಾಗಗಳಾಗಿ ಸಂಘಟಿಸಿ.
• ಲಿಂಕ್ ಕಾಂಪೊನೆಂಟ್: <A> ಕಾಂಪೊನೆಂಟ್ ಬಳಸಿ ರೂಟ್‌ಗಳ ನಡುವೆ ಸುಲಭವಾಗಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿ, ಇದು ಸ್ವಯಂಚಾಲಿತವಾಗಿ URL ನವೀಕರಣಗಳು ಮತ್ತು ಸಕ್ರಿಯ ಲಿಂಕ್ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ.
• ಡೇಟಾ ಲೋಡಿಂಗ್: ರೂಟ್ ರೆಂಡರ್ ಆಗುವ ಮೊದಲು ಅಸಿಂಕ್ರೋನಸ್ ಆಗಿ ಡೇಟಾವನ್ನು ಲೋಡ್ ಮಾಡಿ, ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಟ್ರಾನ್ಸಿಶನ್‌ಗಳು: ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಲು ರೂಟ್‌ಗಳ ನಡುವೆ ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ಟ್ರಾನ್ಸಿಶನ್‌ಗಳನ್ನು ರಚಿಸಿ.
• ಎರರ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್: ದೋಷಗಳನ್ನು ಸುಲಭವಾಗಿ ನಿರ್ವಹಿಸಿ ಮತ್ತು ಕಸ್ಟಮ್ ಎರರ್ ಪುಟಗಳನ್ನು ಪ್ರದರ್ಶಿಸಿ.
• ಹಿಸ್ಟರಿ API ಇಂಟಿಗ್ರೇಷನ್: ಬ್ರೌಸರ್‌ನ ಹಿಸ್ಟರಿ API ಯೊಂದಿಗೆ ಸುಲಭವಾಗಿ ಸಂಯೋಜನೆಗೊಳ್ಳುತ್ತದೆ, ಇದರಿಂದ ಬಳಕೆದಾರರು ಬ್ಯಾಕ್ ಮತ್ತು ಫಾರ್ವರ್ಡ್ ಬಟನ್‌ಗಳನ್ನು ಬಳಸಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಬಹುದು.

ಸಾಲಿಡ್ ರೂಟರ್‌ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸುವುದು

ಇನ್‌ಸ್ಟಾಲೇಶನ್

ಸಾಲಿಡ್ ರೂಟರ್ ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಲು, ನಿಮ್ಮ ಆದ್ಯತೆಯ ಪ್ಯಾಕೇಜ್ ಮ್ಯಾನೇಜರ್ ಬಳಸಿ:

            npm install @solidjs/router
yarn add @solidjs/router
pnpm add @solidjs/router
            

              
                Copy
              
            
          

ಮೂಲ ಸೆಟಪ್

ಸಾಲಿಡ್ ರೂಟರ್‌ನ ತಿರುಳು <Router> ಮತ್ತು <Route> ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಸುತ್ತ ಸುತ್ತುತ್ತದೆ. <Router> ಕಾಂಪೊನೆಂಟ್ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ರೂಟಿಂಗ್ ಸಿಸ್ಟಮ್‌ನ ಮೂಲವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಿದರೆ, <Route> ಕಾಂಪೊನೆಂಟ್‌ಗಳು URL ಗಳು ಮತ್ತು ಕಾಂಪೊನೆಂಟ್‌ಗಳ ನಡುವಿನ ಮ್ಯಾಪಿಂಗ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ.

ಇಲ್ಲಿ ಒಂದು ಮೂಲ ಉದಾಹರಣೆ ಇದೆ:

            import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <Route path="/"> <Home/> </Route>
      <Route path="/about"> <About/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, <Router> ಕಾಂಪೊನೆಂಟ್ ಇಡೀ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಆವರಿಸುತ್ತದೆ. <Route> ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಎರಡು ರೂಟ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ: ಒಂದು ರೂಟ್ ಪಾಥ್ ("/") ಮತ್ತು ಇನ್ನೊಂದು "/about" ಪಾಥ್‌ಗಾಗಿ. ಬಳಕೆದಾರರು ಈ ಯಾವುದೇ ಪಾಥ್‌ಗಳಿಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದಾಗ, ಅದಕ್ಕೆ ಅನುಗುಣವಾದ ಕಾಂಪೊನೆಂಟ್ (Home ಅಥವಾ About) ರೆಂಡರ್ ಆಗುತ್ತದೆ.

<A> ಕಾಂಪೊನೆಂಟ್

ರೂಟ್‌ಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು, ಸಾಲಿಡ್ ರೂಟರ್ ಒದಗಿಸಿದ <A> ಕಾಂಪೊನೆಂಟ್ ಬಳಸಿ. ಈ ಕಾಂಪೊನೆಂಟ್ ಸಾಮಾನ್ಯ HTML <a> ಟ್ಯಾಗ್‌ನಂತೆಯೇ ಇರುತ್ತದೆ, ಆದರೆ ಇದು ಸ್ವಯಂಚಾಲಿತವಾಗಿ URL ನವೀಕರಣಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ಪೂರ್ಣ ಪುಟ ರೀಲೋಡ್‌ಗಳನ್ನು ತಡೆಯುತ್ತದೆ.

            import { A } from '@solidjs/router';

function Navigation() {
  return (
    <nav>
      <A href="/">Home</A>
      <A href="/about">About</A>
    </nav>
  );
}

export default Navigation;
            

              
                Copy
              
            
          

ಬಳಕೆದಾರರು ಈ ಲಿಂಕ್‌ಗಳಲ್ಲಿ ಒಂದನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಸಾಲಿಡ್ ರೂಟರ್ ಬ್ರೌಸರ್‌ನ URL ಅನ್ನು ನವೀಕರಿಸುತ್ತದೆ ಮತ್ತು ಪೂರ್ಣ ಪುಟ ರೀಲೋಡ್ ಅನ್ನು ಪ್ರಚೋದಿಸದೆಯೇ ಅನುಗುಣವಾದ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.

ಸುಧಾರಿತ ರೂಟಿಂಗ್ ತಂತ್ರಗಳು

ರೂಟ್ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳೊಂದಿಗೆ ಡೈನಾಮಿಕ್ ರೂಟಿಂಗ್

ಸಾಲಿಡ್ ರೂಟರ್ ಡೈನಾಮಿಕ್ ರೂಟಿಂಗ್ ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ, ಇದು ಪ್ಯಾರಾಮೀಟರ್‌ಗಳೊಂದಿಗೆ ರೂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ನಿರ್ದಿಷ್ಟ ID ಅಥವಾ ಸ್ಲಗ್ ಆಧಾರದ ಮೇಲೆ ವಿಷಯವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.

            import { Router, Route } from '@solidjs/router';
import UserProfile from './components/UserProfile';

function App() {
  return (
    <Router>
      <Route path="/users/:id"> <UserProfile/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಪಾಥ್‌ನಲ್ಲಿರುವ :id ವಿಭಾಗವು ಒಂದು ರೂಟ್ ಪ್ಯಾರಾಮೀಟರ್ ಆಗಿದೆ. UserProfile ಕಾಂಪೊನೆಂಟ್‌ನೊಳಗೆ id ಪ್ಯಾರಾಮೀಟರ್‌ನ ಮೌಲ್ಯವನ್ನು ಪ್ರವೇಶಿಸಲು, ನೀವು useParams ಹುಕ್ ಅನ್ನು ಬಳಸಬಹುದು:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

useParams ಹುಕ್ ರೂಟ್ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಒಂದು ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, params.id URL ನಿಂದ id ಪ್ಯಾರಾಮೀಟರ್‌ನ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿರುತ್ತದೆ. ನಂತರ, ID ಆಧಾರದ ಮೇಲೆ ಬಳಕೆದಾರರ ಡೇಟಾವನ್ನು ಪಡೆಯಲು createResource ಹುಕ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.

ಅಂತರರಾಷ್ಟ್ರೀಯ ಉದಾಹರಣೆ: ಒಂದು ಜಾಗತಿಕ ಇ-ಕಾಮರ್ಸ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಉತ್ಪನ್ನದ ID ಆಧಾರದ ಮೇಲೆ ಉತ್ಪನ್ನದ ವಿವರಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ನೀವು ಡೈನಾಮಿಕ್ ರೂಟಿಂಗ್ ಅನ್ನು ಬಳಸಬಹುದು: /products/:productId. ಇದು ಪ್ರತಿ ಉತ್ಪನ್ನಕ್ಕೂ ವಿಶಿಷ್ಟವಾದ URL ಗಳನ್ನು ಸುಲಭವಾಗಿ ರಚಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಬಳಕೆದಾರರು ತಮ್ಮ ಸ್ಥಳವನ್ನು ಲೆಕ್ಕಿಸದೆ ನಿರ್ದಿಷ್ಟ ವಸ್ತುಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳಲು ಮತ್ತು ಬುಕ್‌ಮಾರ್ಕ್ ಮಾಡಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.

ನೆಸ್ಟೆಡ್ ರೂಟ್‌ಗಳು

ನೆಸ್ಟೆಡ್ ರೂಟ್‌ಗಳು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ತಾರ್ಕಿಕ ವಿಭಾಗಗಳಾಗಿ ಸಂಘಟಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತವೆ. ಇದು ವಿಶೇಷವಾಗಿ ಬಹು ಹಂತದ ನ್ಯಾವಿಗೇಷನ್ ಹೊಂದಿರುವ ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಉಪಯುಕ್ತವಾಗಿದೆ.

            import { Router, Route } from '@solidjs/router';
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import Settings from './components/Settings';

function App() {
  return (
    <Router>
      <Route path="/dashboard">
        <Dashboard/>
        <Route path="/profile"> <Profile/> </Route>
        <Route path="/settings"> <Settings/> </Route>
      </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, <Dashboard> ಕಾಂಪೊನೆಂಟ್ <Profile> ಮತ್ತು <Settings> ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಕಂಟೇನರ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. <Profile> ಮತ್ತು <Settings> ರೂಟ್‌ಗಳು <Dashboard> ರೂಟ್‌ನೊಳಗೆ ನೆಸ್ಟ್ ಆಗಿವೆ, ಅಂದರೆ ಬಳಕೆದಾರರು "/dashboard" ಪಾಥ್‌ನಲ್ಲಿದ್ದಾಗ ಮಾತ್ರ ಅವು ರೆಂಡರ್ ಆಗುತ್ತವೆ.

<Dashboard> ಕಾಂಪೊನೆಂಟ್‌ನೊಳಗೆ ನೆಸ್ಟೆಡ್ ರೂಟ್‌ಗಳನ್ನು ರೆಂಡರ್ ಮಾಡಲು, ನೀವು <Outlet> ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ:

            import { Outlet } from '@solidjs/router';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <A href="/dashboard/profile">Profile</A>
        <A href="/dashboard/settings">Settings</A>
      </nav>
      <Outlet/>
    </div>
  );
}

export default Dashboard;
            

              
                Copy
              
            
          

<Outlet> ಕಾಂಪೊನೆಂಟ್ ಒಂದು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಅಲ್ಲಿ ನೆಸ್ಟೆಡ್ ರೂಟ್‌ಗಳು ರೆಂಡರ್ ಆಗುತ್ತವೆ. ಬಳಕೆದಾರರು "/dashboard/profile" ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದಾಗ, <Profile> ಕಾಂಪೊನೆಂಟ್ <Outlet> ಕಾಂಪೊನೆಂಟ್‌ನೊಳಗೆ ರೆಂಡರ್ ಆಗುತ್ತದೆ. ಅಂತೆಯೇ, ಬಳಕೆದಾರರು "/dashboard/settings" ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದಾಗ, <Settings> ಕಾಂಪೊನೆಂಟ್ <Outlet> ಕಾಂಪೊನೆಂಟ್‌ನೊಳಗೆ ರೆಂಡರ್ ಆಗುತ್ತದೆ.

createResource ಜೊತೆಗೆ ಡೇಟಾ ಲೋಡಿಂಗ್

ಒಂದು ರೂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುವ ಮೊದಲು ಅಸಿಂಕ್ರೋನಸ್ ಆಗಿ ಡೇಟಾವನ್ನು ಲೋಡ್ ಮಾಡುವುದು ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಸಾಲಿಡ್ ರೂಟರ್ SolidJS ನ createResource ಹುಕ್‌ನೊಂದಿಗೆ ಸುಲಭವಾಗಿ ಸಂಯೋಜನೆಗೊಳ್ಳುತ್ತದೆ, ಇದರಿಂದ ಡೇಟಾ ಲೋಡಿಂಗ್ ಒಂದು ಸರಳ ಪ್ರಕ್ರಿಯೆಯಾಗುತ್ತದೆ.

ನಾವು ಈ ಹಿಂದೆ UserProfile ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಇದರ ಉದಾಹರಣೆಯನ್ನು ನೋಡಿದ್ದೇವೆ, ಆದರೆ ಸ್ಪಷ್ಟತೆಗಾಗಿ ಇಲ್ಲಿದೆ:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

createResource ಹುಕ್ ಎರಡು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ: ಡೇಟಾ ಲೋಡಿಂಗ್ ಅನ್ನು ಪ್ರಚೋದಿಸುವ ಒಂದು ಸಿಗ್ನಲ್ ಮತ್ತು ಡೇಟಾವನ್ನು ಪಡೆಯುವ ಒಂದು ಫಂಕ್ಷನ್. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಸಿಗ್ನಲ್ () => params.id ಆಗಿದೆ, ಅಂದರೆ id ಪ್ಯಾರಾಮೀಟರ್ ಬದಲಾದಾಗಲೆಲ್ಲಾ ಡೇಟಾವನ್ನು ಪಡೆಯಲಾಗುತ್ತದೆ. fetchUser ಫಂಕ್ಷನ್ ID ಆಧಾರದ ಮೇಲೆ API ನಿಂದ ಬಳಕೆದಾರರ ಡೇಟಾವನ್ನು ಪಡೆಯುತ್ತದೆ.

createResource ಹುಕ್ ಒಂದು ಅರೇಯನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಇದರಲ್ಲಿ ರಿಸೋರ್ಸ್ (ಪಡೆದ ಡೇಟಾ) ಮತ್ತು ಡೇಟಾವನ್ನು ಮರು-ಪಡೆಯಲು ಒಂದು ಫಂಕ್ಷನ್ ಇರುತ್ತದೆ. ರಿಸೋರ್ಸ್ ಡೇಟಾವನ್ನು ಹೊಂದಿರುವ ಒಂದು ಸಿಗ್ನಲ್ ಆಗಿದೆ. ನೀವು ಸಿಗ್ನಲ್ ಅನ್ನು ಕರೆ ಮಾಡುವ ಮೂಲಕ (user()) ಡೇಟಾವನ್ನು ಪ್ರವೇಶಿಸಬಹುದು. ಡೇಟಾ ಇನ್ನೂ ಲೋಡ್ ಆಗುತ್ತಿದ್ದರೆ, ಸಿಗ್ನಲ್ undefined ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಡೇಟಾ ಪಡೆಯುತ್ತಿರುವಾಗ ಲೋಡಿಂಗ್ ಇಂಡಿಕೇಟರ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲು ಇದು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಟ್ರಾನ್ಸಿಶನ್‌ಗಳು

ರೂಟ್‌ಗಳ ನಡುವೆ ಟ್ರಾನ್ಸಿಶನ್‌ಗಳನ್ನು ಸೇರಿಸುವುದರಿಂದ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಹೆಚ್ಚಿಸಬಹುದು. ಸಾಲಿಡ್ ರೂಟರ್‌ನಲ್ಲಿ ಅಂತರ್ನಿರ್ಮಿತ ಟ್ರಾನ್ಸಿಶನ್ ಬೆಂಬಲವಿಲ್ಲದಿದ್ದರೂ, ಇದು solid-transition-group ನಂತಹ ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ಚೆನ್ನಾಗಿ ಸಂಯೋಜನೆಗೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಸುಗಮ ಹಾಗೂ ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ಟ್ರಾನ್ಸಿಶನ್‌ಗಳನ್ನು ಸಾಧಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಮೊದಲಿಗೆ, solid-transition-group ಪ್ಯಾಕೇಜ್ ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ:

            npm install solid-transition-group
yarn add solid-transition-group
pnpm add solid-transition-group
            

              
                Copy
              
            
          

ನಂತರ, ನಿಮ್ಮ ರೂಟ್‌ಗಳನ್ನು <TransitionGroup> ಕಾಂಪೊನೆಂಟ್‌ನೊಂದಿಗೆ ಸುತ್ತುವರಿಯಿರಿ:

            import { Router, Route } from '@solidjs/router';
import { TransitionGroup, Transition } from 'solid-transition-group';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <TransitionGroup>
        <Route path="/">
          <Transition name="fade" duration={300}>
            <Home/>
          </Transition>
        </Route>
        <Route path="/about">
          <Transition name="fade" duration={300}>
            <About/>
          </Transition>
        </Route>
      </TransitionGroup>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಪ್ರತಿಯೊಂದು ರೂಟ್ ಅನ್ನು <Transition> ಕಾಂಪೊನೆಂಟ್‌ನೊಂದಿಗೆ ಸುತ್ತುವರಿಯಲಾಗಿದೆ. name ಪ್ರೊಪ್ ಟ್ರಾನ್ಸಿಶನ್‌ಗಾಗಿ CSS ಕ್ಲಾಸ್ ಪ್ರಿಫಿಕ್ಸ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ, ಮತ್ತು duration ಪ್ರೊಪ್ ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳಲ್ಲಿ ಟ್ರಾನ್ಸಿಶನ್‌ನ ಅವಧಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.

ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಲ್ಲಿ ಟ್ರಾನ್ಸಿಶನ್‌ಗಾಗಿ ಅನುಗುಣವಾದ CSS ಕ್ಲಾಸ್‌ಗಳನ್ನು ನೀವು ವ್ಯಾಖ್ಯಾನಿಸಬೇಕಾಗುತ್ತದೆ:

            .fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}
            

              
                Copy
              
            
          

ಈ CSS ಕೋಡ್ ಒಂದು ಸರಳ ಫೇಡ್-ಇನ್/ಫೇಡ್-ಔಟ್ ಟ್ರಾನ್ಸಿಶನ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಒಂದು ರೂಟ್ ಪ್ರವೇಶಿಸಿದಾಗ, .fade-enter ಮತ್ತು .fade-enter-active ಕ್ಲಾಸ್‌ಗಳು ಅನ್ವಯವಾಗುತ್ತವೆ, ಇದರಿಂದ ಕಾಂಪೊನೆಂಟ್ ಫೇಡ್-ಇನ್ ಆಗುತ್ತದೆ. ಒಂದು ರೂಟ್‌ನಿಂದ ನಿರ್ಗಮಿಸಿದಾಗ, .fade-exit ಮತ್ತು .fade-exit-active ಕ್ಲಾಸ್‌ಗಳು ಅನ್ವಯವಾಗುತ್ತವೆ, ಇದರಿಂದ ಕಾಂಪೊನೆಂಟ್ ಫೇಡ್-ಔಟ್ ಆಗುತ್ತದೆ.

ಎರರ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್

ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ದೋಷಗಳನ್ನು ಸರಿಯಾಗಿ ನಿರ್ವಹಿಸುವುದು ಅತ್ಯಗತ್ಯ. ಸಾಲಿಡ್ ರೂಟರ್‌ನಲ್ಲಿ ಅಂತರ್ನಿರ್ಮಿತ ಎರರ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಇಲ್ಲ, ಆದರೆ ನೀವು ಜಾಗತಿಕ ಎರರ್ ಬೌಂಡರಿ ಅಥವಾ ರೂಟ್-ನಿರ್ದಿಷ್ಟ ಎರರ್ ಹ್ಯಾಂಡ್ಲರ್ ಬಳಸಿ ಅದನ್ನು ಸುಲಭವಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು.

ಇಲ್ಲಿ ಜಾಗತಿಕ ಎರರ್ ಬೌಂಡರಿಯ ಒಂದು ಉದಾಹರಣೆ ಇದೆ:

            import { createSignal, Suspense, ErrorBoundary } from 'solid-js';
import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  const [error, setError] = createSignal(null);

  return (
    <ErrorBoundary fallback={<p>Something went wrong: {error()?.message}</p>}>
      <Suspense fallback={<p>Loading...</p>}>
        <Router>
          <Route path="/"> <Home/> </Route>
          <Route path="/about"> <About/> </Route>
        </Router>
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;
            

              
                Copy
              
            
          

<ErrorBoundary> ಕಾಂಪೊನೆಂಟ್ ತನ್ನ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಸಂಭವಿಸುವ ಯಾವುದೇ ದೋಷಗಳನ್ನು ಹಿಡಿಯುತ್ತದೆ. fallback ಪ್ರೊಪ್ ಒಂದು ದೋಷ ಸಂಭವಿಸಿದಾಗ ರೆಂಡರ್ ಮಾಡಬೇಕಾದ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಇದು ದೋಷ ಸಂದೇಶದೊಂದಿಗೆ ಒಂದು ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.

<Suspense> ಕಾಂಪೊನೆಂಟ್ ಪೆಂಡಿಂಗ್ ಪ್ರಾಮಿಸ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ, ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಅಸಿಂಕ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಅಥವಾ ಡೇಟಾ ಲೋಡಿಂಗ್‌ನೊಂದಿಗೆ ಬಳಸಲಾಗುತ್ತದೆ. ಪ್ರಾಮಿಸ್‌ಗಳು ರಿಸಾಲ್ವ್ ಆಗುವವರೆಗೆ ಇದು `fallback` ಪ್ರೊಪ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

ಒಂದು ದೋಷವನ್ನು ಪ್ರಚೋದಿಸಲು, ನೀವು ಕಾಂಪೊನೆಂಟ್‌ನೊಳಗೆ ಒಂದು ಎಕ್ಸೆಪ್ಶನ್ ಅನ್ನು ಥ್ರೋ ಮಾಡಬಹುದು:

            function Home() {
  throw new Error('Failed to load home page');

  return <h1>Home</h1>;
}

export default Home;
            

              
                Copy
              
            
          

ಈ ಕೋಡ್ ಕಾರ್ಯಗತಗೊಂಡಾಗ, <ErrorBoundary> ಕಾಂಪೊನೆಂಟ್ ದೋಷವನ್ನು ಹಿಡಿಯುತ್ತದೆ ಮತ್ತು ಫಾಲ್‌ಬ್ಯಾಕ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.

ಅಂತರರಾಷ್ಟ್ರೀಯ ಪರಿಗಣನೆಗಳು: ದೋಷ ಸಂದೇಶಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವಾಗ, ಅಂತರರಾಷ್ಟ್ರೀಕರಣವನ್ನು (i18n) ಪರಿಗಣಿಸಿ. ಬಳಕೆದಾರರ ಆದ್ಯತೆಯ ಭಾಷೆಯಲ್ಲಿ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಒದಗಿಸಲು ಒಂದು ಅನುವಾದ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಿ. ಉದಾಹರಣೆಗೆ, ಜಪಾನ್‌ನಲ್ಲಿರುವ ಬಳಕೆದಾರರಿಗೆ ದೋಷ ಎದುರಾದರೆ, ಅವರು ದೋಷ ಸಂದೇಶವನ್ನು ಇಂಗ್ಲಿಷ್‌ನಲ್ಲಿ ಅಲ್ಲ, ಜಪಾನೀಸ್ ಭಾಷೆಯಲ್ಲಿ ನೋಡಬೇಕು.

ಸಾಲಿಡ್ ರೂಟರ್ ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

• ನಿಮ್ಮ ರೂಟ್‌ಗಳನ್ನು ಸಂಘಟಿತವಾಗಿಡಿ: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ತಾರ್ಕಿಕ ವಿಭಾಗಗಳಾಗಿ ಸಂಘಟಿಸಲು ನೆಸ್ಟೆಡ್ ರೂಟ್‌ಗಳನ್ನು ಬಳಸಿ. ಇದು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
• ಡೈನಾಮಿಕ್ ವಿಷಯಕ್ಕಾಗಿ ರೂಟ್ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ಬಳಸಿ: ನಿರ್ದಿಷ್ಟ ID ಅಥವಾ ಸ್ಲಗ್ ಆಧಾರದ ಮೇಲೆ ವಿಷಯವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಡೈನಾಮಿಕ್ URL ಗಳನ್ನು ರಚಿಸಲು ರೂಟ್ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳನ್ನು ಬಳಸಿ.
• ಡೇಟಾವನ್ನು ಅಸಿಂಕ್ರೋನಸ್ ಆಗಿ ಲೋಡ್ ಮಾಡಿ: ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ರೂಟ್ ರೆಂಡರ್ ಆಗುವ ಮೊದಲು ಡೇಟಾವನ್ನು ಅಸಿಂಕ್ರೋನಸ್ ಆಗಿ ಲೋಡ್ ಮಾಡಿ.
• ರೂಟ್‌ಗಳ ನಡುವೆ ಟ್ರಾನ್ಸಿಶನ್‌ಗಳನ್ನು ಸೇರಿಸಿ: ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೆಚ್ಚು ಸುಂದರಗೊಳಿಸಲು ಟ್ರಾನ್ಸಿಶನ್‌ಗಳನ್ನು ಬಳಸಿ.
• ದೋಷಗಳನ್ನು ಸರಿಯಾಗಿ ನಿರ್ವಹಿಸಿ: ದೋಷಗಳನ್ನು ಹಿಡಿದು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ರೀತಿಯಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲು ಎರರ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ.
• ವಿವರಣಾತ್ಮಕ ರೂಟ್ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ: ರೂಟ್‌ನ ವಿಷಯವನ್ನು ನಿಖರವಾಗಿ ಪ್ರತಿಬಿಂಬಿಸುವ ರೂಟ್ ಹೆಸರುಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಿ. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ರಚನೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
• ನಿಮ್ಮ ರೂಟ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ ರೂಟ್‌ಗಳು ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಯೂನಿಟ್ ಟೆಸ್ಟ್‌ಗಳನ್ನು ಬರೆಯಿರಿ. ಇದು ದೋಷಗಳನ್ನು ಬೇಗನೆ ಹಿಡಿಯಲು ಮತ್ತು ರಿಗ್ರೆಶನ್‌ಗಳನ್ನು ತಡೆಯಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಮುಕ್ತಾಯ

ಸಾಲಿಡ್ ರೂಟರ್ ಒಂದು ಶಕ್ತಿಯುತ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೂಟರ್ ಆಗಿದ್ದು, ಇದು SolidJS ನೊಂದಿಗೆ ಸುಲಭವಾಗಿ ಸಂಯೋಜನೆಗೊಳ್ಳುತ್ತದೆ. ಇದರ ವೈಶಿಷ್ಟ್ಯಗಳಲ್ಲಿ ಪರಿಣತಿ ಹೊಂದುವ ಮೂಲಕ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ನೀವು ಸುಗಮ ಮತ್ತು ಆಕರ್ಷಕ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸುವ ಸಂಕೀರ್ಣ ಮತ್ತು ಡೈನಾಮಿಕ್ ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು. ಮೂಲಭೂತ ಸೆಟಪ್‌ನಿಂದ ಹಿಡಿದು ಡೈನಾಮಿಕ್ ರೂಟಿಂಗ್, ಡೇಟಾ ಲೋಡಿಂಗ್, ಮತ್ತು ಟ್ರಾನ್ಸಿಶನ್‌ಗಳಂತಹ ಸುಧಾರಿತ ತಂತ್ರಗಳವರೆಗೆ, ಈ ಮಾರ್ಗದರ್ಶಿಯು SolidJS ನಲ್ಲಿ ಕ್ಲೈಂಟ್-ಸೈಡ್ ನ್ಯಾವಿಗೇಷನ್ ಜಗತ್ತಿನಲ್ಲಿ ಆತ್ಮವಿಶ್ವಾಸದಿಂದ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಬೇಕಾದ ಜ್ಞಾನ ಮತ್ತು ಕೌಶಲ್ಯಗಳನ್ನು ನಿಮಗೆ ಒದಗಿಸಿದೆ. ಸಾಲಿಡ್ ರೂಟರ್‌ನ ಶಕ್ತಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ SolidJS ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ!

ಅತ್ಯಂತ ನವೀಕೃತ ಮಾಹಿತಿ ಮತ್ತು ಉದಾಹರಣೆಗಳಿಗಾಗಿ ಅಧಿಕೃತ ಸಾಲಿಡ್ ರೂಟರ್ ದಸ್ತಾವೇಜನ್ನು ಸಂಪರ್ಕಿಸಲು ಮರೆಯದಿರಿ: [ಸಾಲಿಡ್ ರೂಟರ್ ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ಲಿಂಕ್ - ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್]

SolidJS ನೊಂದಿಗೆ ಅದ್ಭುತವಾದ ವಿಷಯಗಳನ್ನು ನಿರ್ಮಿಸುತ್ತಿರಿ!